<div class="row justify-content-left p-5" id="platforms-supported-by-selenium">
  <div class="card border-0 w-100 bg-transparent">
    <div class="card-body">
      <h2 class="card-title pb-4">
        Platforms Supported by Selenium
      </h2>
      <p class="card-text w-lg-75">
        <p>
          <button class="btn btn-dark btn-lg btn-block rounded-0 text-left" type="button" data-bs-toggle="collapse"
            data-bs-target="#supported-browsers" aria-expanded="false" aria-controls="supported-browsers"
            style="font-size: 25px;">
            <i class="fas fa-plus show-collapsed pe-2"></i>
            <i class="fas fa-minus show-expanded pe-2"></i>
            Browsers
          </button>
        </p>
        <div class="collapse pb-3" id="supported-browsers">
          <div class="card mb-3 border-0">
            <div class="row no-gutters align-items-center">
              <div class="col-md-2 text-center">
                <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/browsers/firefox.svg" alt="Firefox"/>
              </div>
              <div class="col-md-10">
                <div class="card-body">
                  <h4 class="card-title fw-bold">Firefox</h4>
                  <p class="card-text">
                    GeckoDriver is implemented and supported by Mozilla, refer to their
                    <a href="https://firefox-source-docs.mozilla.org/testing/geckodriver/Support.html">documentation</a>
                    for supported versions.
                  </p>                  
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-3 border-0">
            <div class="row no-gutters align-items-center">
              <div class="col-md-2 text-center">
                <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/browsers/internet-explorer.svg" alt="Internet Explorer"/>
              </div>
              <div class="col-md-10">
                <div class="card-body">
                  <h4 class="card-title fw-bold">Internet Explorer</h4>
                  <p class="card-text">
                    Only version 11 is supported, and it requires additional
                    <a href="https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver#required-configuration">configuration</a>.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-3 border-0">
            <div class="row no-gutters align-items-center">
              <div class="col-md-2 text-center">
                <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/browsers/safari.svg" alt="Safari"/>
              </div>
              <div class="col-md-10">
                <div class="card-body">
                  <h4 class="card-title fw-bold">Safari</h4>
                  <p class="card-text">
                    SafariDriver is supported directly by Apple, for more information, check their
                    <a href="https://developer.apple.com/documentation/webkit/about_webdriver_for_safari">documentation</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-3 border-0">
            <div class="row no-gutters">
              <div class="col-md-2 text-center">
                <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/browsers/opera.svg" alt="Opera"/>
              </div>
              <div class="col-md-10">
                <div class="card-body">
                  <h4 class="card-title fw-bold">Opera</h4>
                  <p class="card-text">
                    OperaDriver is supported by Opera Software, refer to their
                    <a href="https://github.com/operasoftware/operachromiumdriver/releases">documentation</a>
                    for supported versions.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-3 border-0">
            <div class="row no-gutters align-items-center">
              <div class="col-md-2 text-center">
                <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/browsers/chrome.svg" alt="Chrome"/>
              </div>
              <div class="col-md-10">
                <div class="card-body">
                  <h4 class="card-title fw-bold">Chrome</h4>
                  <p class="card-text">
                    ChromeDriver is supported by the Chromium project, please refer to their
                    <a href="https://chromedriver.chromium.org/">documentation</a>
                    for any compatibility information.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="card mb-3 border-0">
            <div class="row no-gutters align-items-center">
              <div class="col-md-2 text-center">
                <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/browsers/edge.svg" alt="Edge"/>
              </div>
              <div class="col-md-10">
                <div class="card-body">
                  <h4 class="card-title fw-bold">Edge</h4>
                  <p class="card-text">
                    Microsoft is implementing and maintaining the Microsoft Edge WebDriver, please refer to their
                    <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/#downloads">documentation</a>
                    for any compatibility information.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>        
        <p class="card-text w-lg-75">
          <p>
            <button class="btn btn-dark btn-lg btn-block rounded-0 text-left" type="button" data-bs-toggle="collapse"
              data-bs-target="#supported-os" aria-expanded="false" aria-controls="supported-os"
              style="font-size: 25px;">
              <i class="fas fa-plus show-collapsed pe-2"></i>
              <i class="fas fa-minus show-expanded pe-2"></i>
              Operating Systems
            </button>
          </p>
          <div class="collapse" id="supported-os">
            <div class="card mb-3 border-0">
              <div class="row no-gutters align-items-center">
                <div class="col-md-2 text-center">
                  <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/os/windows.svg" alt="Microsoft Windows"/>
                </div>
                <div class="col-md-10">
                  <div class="card-body">
                    <h4 class="card-title fw-bold">Microsoft Windows</h4>
                    <p class="card-text">
                      Most versions of MS Windows that are currently still supported by Microsoft 
                      should work with Selenium. Although we use the latest MS Windows to troubleshoot 
                      things, it does not mean Selenium won't attempt to support different versions of Windows. 
                      This only means we don't continually run tests on other particular version of Windows.
                    </p>                  
                  </div>
                </div>
              </div>
            </div>  
            <div class="card mb-3 border-0">
              <div class="row no-gutters align-items-center">
                <div class="col-md-2 text-center">
                  <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/os/apple.svg" alt="Apple macOS"/>
                </div>
                <div class="col-md-10">
                  <div class="card-body">
                    <h4 class="card-title fw-bold">macOS</h4>
                    <p class="card-text">
                      We currently do not use any version of macOS in our automated tests against 
                      the Selenium project. However most developers on the project are using a recent 
                      version of macOS and we'll continue to support the current stable release and 
                      often the previous release.
                    </p>                  
                  </div>
                </div>
              </div>
            </div>  
            <div class="card mb-3 border-0">
              <div class="row no-gutters align-items-center">
                <div class="col-md-2 text-center">
                  <img class="w-100 shadow-1-strong rounded" style="max-width: 100px;" src="/images/os/linux.svg" alt="Linux"/>
                </div>
                <div class="col-md-10">
                  <div class="card-body">
                    <h4 class="card-title fw-bold">Linux</h4>
                    <p class="card-text">
                      We test mainly on Ubuntu, but other variations of Linux should 
                      also work where the browser manufacturers support them.
                    </p>                  
                  </div>
                </div>
              </div>
            </div>  

          </div>        
        </p>
    </div>
  </div>  
</div>
